<template>
  <div class="city">
    <div class="remen">
      <div class="r1">热门城市</div>
      <div class="r2">
        <div>上海</div>
        <div>北京</div>
        <div>广州</div>
        <div>深圳</div>
        <div>武汉</div>
        <div>天津</div>
        <div>西安</div>
        <div>南京</div>
        <div>杭州</div>
        <div>成都</div>
        <div>重庆</div>
      </div>
    </div>
    <van-index-bar>
      <template v-for="(item, index) in city">
        <van-index-anchor :key="index" :index="item.initial" />
        <van-cell
            v-for="(i, ikey) in item.list"
            :key="index + '-' + ikey"
            :title="i.name"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "City",
  data() {
    return {
      city:[],
    }
  },
  mounted() {
    axios.get("city.json").then((res) => {
      console.log(res);
      this.city = res.data.city;
    });
  }
}
</script>

<style scoped>
.remen .r1{
  background: #ebebeb;
  width: 100%;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  text-indent: 1em;
}
.remen .r2{
  background: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content:flex-start;
  padding-bottom: 20px;
}
.remen .r2 div{
  width: 26%;
  height: 40px;
  background: white;
  font-size: 17px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
  margin-top: 20px;
}
</style>